<template>
  <div class="travelOrderRefund">
    <el-form
    style="margin:20px 0 "
      :model="results"
      :inline="true"
      size="mini"
      ref="ruleForm"
      label-width="130px"
    >
      <el-form-item label="商品名称">
          <el-input v-model="results.groupName"></el-input>
        </el-form-item>
         <el-form-item label="openId">
          <el-input v-model="results.groupName"></el-input>
        </el-form-item>
         <el-form-item label="会员编号">
          <el-input v-model="results.groupName"></el-input>
        </el-form-item>
         <el-form-item label="会员姓名、手机号">
          <el-input v-model="results.customerNameOrPhone"></el-input>
        </el-form-item>

         <el-form-item label="时间">
 
      <el-date-picker size="mini" type="date" placeholder="开始时间" v-model="results.startTime"  value-format="yyyy-MM-dd"></el-date-picker>
    
    <span>--</span>
      <el-time-picker  size="mini" placeholder="结束时间" v-model="results.endTime" value-format="yyyy-MM-dd"></el-time-picker>
  
        </el-form-item>
         <el-form-item label="退单状态">
           <el-select v-model="results.status" placeholder="请选择活动区域">
      <el-option label="申请退单" value="0"></el-option>
      <el-option label="退单成功" value="1"></el-option>
      <el-option label="退单失败" value="2"></el-option>
    </el-select>
        </el-form-item>
         <el-form-item label="供应商">
           <el-select clearable placeholder="供应商" v-model="results.supplierId"  >
                    <el-option :label="c2.supplierName" :value="c2.id" v-for="c2 in list1" :key="c2.id"></el-option>
                  </el-select>
        
        </el-form-item>
         <el-form-item label="订单类型">
              <el-select clearable placeholder="订单类型" v-model="ordertype" @change="places($event)" class="select">
                <el-option :label="c3.title" :value="c3.id" v-for="c3 in ordertypeoption" :key="c3.id"></el-option>
              </el-select>
            </el-form-item>
              <el-form-item>
         <el-button type="primary" size="mini" @click="viewproduct">查询</el-button>
        </el-form-item>
    </el-form>
    <!-- 表格数据 -->
    <el-table
      :data="tableData"
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
      size="mini"
      border
    >
      <el-table-column prop="orderId" label="订单号" width="100">
      </el-table-column>
      
      <el-table-column prop="nickName" label="昵称"></el-table-column>
      <el-table-column prop="productName" label="商品名称">

      </el-table-column>
      <el-table-column prop="productNumber" label="商品数量"></el-table-column>
      <el-table-column prop="status" label="退单状态">
        <template slot-scope="scope">
              <template v-if="scope.row.status == 0">申请退单</template>
              <template v-if="scope.row.status == 1">退单成功</template>
              <template v-if="scope.row.status == 2">退单失败</template>
        </template>
      </el-table-column>
      <el-table-column prop="customerName" label="会员姓名"></el-table-column>
      <el-table-column prop="contractPhoneOne" label="联系人电话" width="100"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="applyTime" label="退款确认时间" width="100"></el-table-column>
      <el-table-column prop="refundAmount" label="退款金额"></el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <!-- <el-button slot="reference" type="primary"  size="mini" @click="shelves(scope.row)" >详情</el-button> -->
          <el-button slot="reference" v-if="scope.row.status == 0" type="primary" size="mini" @click="raincheck(scope.row)">审核</el-button>

        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>
    <!-- <el-dialog
      title="退单详情"
      :visible.sync="refundDialogVisible"
      width="30%"
      :before-close="handleClose">
        <div>
          <div style="display:flex">
            <span>订单号：</span>
            <span>{{infofrom.orderId}}</span>
          </div>
           <div style="display:flex">
            <span>团名称：</span>
            <span>{{infofrom.groupName}}</span>
          </div>
             <div style="display:flex">
            <span>退订日期：</span>
            <span>{{infofrom.applytime}}</span>
          </div>
          <div style="display:flex">
            <span>退订金额：</span>
            <span>{{infofrom.refundamount}}</span>
          </div>
           <div style="display:flex">
            <span>会员名称：</span>
            <span>{{infofrom.customerName}}</span>
          </div>
           <div style="display:flex">
            <span>会员手机：</span>
            <span>{{infofrom.customerPhone}}</span>
          </div>
        </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refundDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="refundDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog> -->
    <el-dialog
      title="审核"
      :visible.sync="AudiodialogVisible"
      width="30%"
       >
        <!-- <el-form ref="form" :model="failedreasonfrom" label-width="80px">
  <el-form-item label="退单原因">
    <el-input v-model="failedreasonfrom.failedreason"></el-input>
  </el-form-item>
        </el-form> -->
        <span>确认退单吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="AudiodialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="geteditOrderRefund">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "travelOrderRefund",
  data() {
    return {
        ordertype: "", //订单类型
          ordertypeoption: [{
            id: 1,
            title: "全部订单",
          },
          {
            id: 0,
            title: "普通订单",
          },

          {
            id: 10,
            title: "团单",
          },
          {
            id: 20,
            title: "杀单",
          },
          {
            id: 30,
            title: "商品组合单",
          },
          {
            id: 40,
            title: "权益兑换",
          },
          {
            id: 90,
            title: "混合订单",
          },
        ],
      failedreasonfrom:{
        failedreason:""
      },
      AudiodialogVisible:false,
      refundDialogVisible:false,
          // 供应商的数据
        list1: [],
 
      // 查询数据
      results: {
        startTime: "",
        endTime: "",
        typeId: "",
        status: "",
        productName: "",
        orderCodeOrOpenId: "",
        customerId: "",
        customerNameOrPhone: "",
        supplierId: "",
      },
      // 列表数据
      tableData: [
        
      ],
      // 详情数据
      infofrom:{},
      // 分页
      pageTotal: 0,
      pageSize: 1,
      currentPage: 10,
         refundId:"",
         status:"",
    };
  },
  methods: {
    // 审核按钮
    raincheck(row){
      console.log(row)
      this.refundId = row.refundId
      this.status = row.status
     
      this.AudiodialogVisible = true
    },
    // 查询按钮
    viewproduct(){
      localStorage.setItem("pageSize", 10);
      localStorage.setItem("pageNum", 1);
      this.getqueryMallOrderRefunds()
    },
    //分页
    handleSizeChange(value) {
      console.log("1", value);
      localStorage.setItem("pageSize", value);
      localStorage.setItem("pageNum", 1);
      this.getqueryMallOrderRefunds();
      this.pageSize = value;
    },
    handleCurrentChange(value) {
      console.log("2", value);
      localStorage.setItem("pageNum", value);
      localStorage.setItem("pageSize", this.pageSize);
      this.getqueryMallOrderRefunds();
      // orders = res.data;
    },
    //供应商列表
      getsupplier(id) {
        // console.log(id);
        localStorage.setItem("isToken", true);
        this.$axios.getsupplier({}).then((res) => {
          let arr = JSON.parse(JSON.stringify(res.data));
          arr.forEach((item) => {
            item.id = item.id * 1;
          });
          this.list1 = arr;
        });
        
      },
    shelves(row){
      console.log(row)
       this.$axios.getOrderRefund({
        orderRefundId:row.orderrefundid
      }).then((res) => {
        if (res.code == "200") {
          this.infofrom = res.data
        }
      });
      this.refundDialogVisible = true
    },
    // 列表接口
    getqueryMallOrderRefunds() {
      this.$axios.getqueryMallOrderRefunds({
       startTime:this.results.startTime,
       endTime:this.results.endTime,
       typeId:this.results.typeId,
       status:this.results.status,
       productName:this.results.productName,
       orderCodeOrOpenId:this.results.orderCodeOrOpenId,
       customerId:this.results.customerId,
       customerNameOrPhone:this.results.customerNameOrPhone,
       supplierId:this.results.supplierId,
      }).then((res) => {
        if (res.code == "200") {
          this.tableData = res.data
          this.pageTotal = res.data.length
        }
      });
    },
     // 审核接口
    geteditOrderRefund() {
      this.$axios.geteditmallOrderRefund({
         refundId:Number(this.refundId),
         status:1,
      }).then((res) => {
        if (res.code == "200") {
           this.$message({
          message: '审核成功',
          type: 'success'
        });
           this.AudiodialogVisible = false
           this.getqueryMallOrderRefunds()
        }
      });
    },
  },
  mounted() {   
    this.getqueryMallOrderRefunds()
    this.getsupplier()
  },
};
</script>

<style scoped>
</style>